<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form :model="params" :label-width="100">
                <row :gutter="16">
                    <Col span="24">
                        <FormItem label="部门选择">
                            <Select
                                v-model="params.department_id"
                                v-width="200"
                                :clearable="true"
                                @on-change="askDatasing"
                                @on-clear="askDatasing"
                            >
                                <Option
                                    v-for="item in select_department_list"
                                    :value="item.value"
                                    :key="item.value"
                                    >{{ item.label }}</Option
                                >
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="公共数据">
                            <CheckboxGroup
                                v-model="params.belong_member_id"
                                @on-change="askDatasings"
                            >
                                <Checkbox
                                    :label="item.value"
                                    v-for="item in select_common_list"
                                    :key="item.value"
                                    :disabled="params.belong_member_id.length>0&&params.belong_member_id[0]!==item.value"
                                    ><span
                                        >{{ item.label }}（{{
                                            item.total
                                        }}）</span
                                    ></Checkbox
                                >
                            </CheckboxGroup>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="上次归属人" v-if="+params.belong_member_id[0]===-1||+params.belong_member_id[0]===-2">
                            <CheckboxGroup
                                v-model="params.last_belong_member_id"
                                @on-change="askData"
                                 v-if="+params.belong_member_id[0]===-1"
                            >
                            <!-- @on-change="askDatatag" -->
                                <Checkbox
                                    :label="item.value"
                                    v-for="item in select_fish_member_lists"
                                    :key="item.value"
                                >
                                    <span v-if="+item.value>0">
                                        <span v-if="+item.status === 0" style="color:#ed4014">{{ item.label }}-已离职（{{item.total}}）</span>
                                        <span v-else>{{ item.label }}（{{item.total}}）</span>
                                    </span>
                                    <span v-else>无归属（{{item.total}}）</span>
                                </Checkbox>
                            </CheckboxGroup>
                            <CheckboxGroup
                                v-model="params.last_belong_member_id"
                                @on-change="askData"
                                 v-if="+params.belong_member_id[0]===-2"
                            >
                            <!-- @on-change="askDatatag" -->
                                <Checkbox
                                    :label="item.value"
                                    v-for="item in select_sea_member_lists"
                                    :key="item.value"
                                >
                                    <span v-if="+item.value>0">
                                        <span v-if="+item.status === 0" style="color:#ed4014">{{ item.label }}-已离职（{{item.total}}）</span>
                                        <span v-else>{{ item.label }}（{{item.total}}）</span>
                                    </span>
                                    <span v-else>无归属（{{item.total}}）</span>
                                </Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="归属人">
                            <CheckboxGroup
                                v-model="params.belong_member_id"
                                @on-change="askData"
                            >
                             <!-- @on-change="askDatatag" -->
                                <Checkbox
                                    :label="item.value"
                                    v-for="item in select_member_lists"
                                    :key="item.value"
                                    :disabled="params.belong_member_id.length>0&&(+params.belong_member_id[0]===-1||+params.belong_member_id[0]===-2)"
                                >
                                    <span v-if="+item.value>0">
                                        <span v-if="+item.status === 0" style="color:#ed4014">{{ item.label }}-已离职（{{item.total}}）</span>
                                        <span v-else>{{ item.label }}（{{item.total}}）</span>
                                    </span>
                                    <span v-else>无归属（{{item.total}}）</span>
                                </Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="创建日期">
                            <DatePicker :editable="false"
                                type="daterange"
                                placeholder="创建日期"
                                v-model="params.timeval"
                                @on-change="askData"
                            ></DatePicker>
                        </FormItem>
                    </Col>
                    <!-- <Col span="8">
                        <FormItem label="归属人">
                            <Select
                                v-model="params.belong_member_id"
                                multiple
                                :max-tag-count="3"
                                @on-change="askData"
                            >
                                <OptionGroup
                                    :label="item.label"
                                    v-for="item in member_list"
                                    :key="item.value"
                                >
                                    <Option
                                        v-for="its in item.children"
                                        :value="its.value"
                                        :key="its.value"
                                        >{{ its.label }}</Option
                                    >
                                </OptionGroup>
                            </Select>
                        </FormItem>
                    </Col> -->
                    <Col span="8">
                        <FormItem label="来源">
                            <TreeSelect
                                :max-tag-count="3"
                                v-model="params.channel_id"
                                :data="source_channel"
                                @on-change="askData"
                                multiple
                                transfer
                            />
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="病种">
                            <TreeSelect
                                v-model="params.patient_diseases_id"
                                multiple
                                :max-tag-count="3"
                                :data="diseases"
                                @on-change="askData"
                            />
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="最近回访人">
                            <Select
                                v-model="params.last_callback_id"
                                @on-change="askData"
                                :clearable="true"
                            >
                                <OptionGroup
                                    :label="item.label"
                                    v-for="item in member_list"
                                    :key="item.value"
                                >
                                    <Option
                                        v-for="its in item.children"
                                        :value="its.value"
                                        :key="its.value"
                                        >{{ its.label }}</Option
                                    >
                                </OptionGroup>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="患者状态">
                            <Select
                                v-model="params.patient_status_id"
                                :clearable="true"
                                @on-change="askData"
                            >
                                <Option
                                    v-for="item in status_list"
                                    :value="item.id"
                                    :key="item.id"
                                    >{{ item.status_name }}</Option
                                >
                            </Select>
                        </FormItem></Col
                    ><Col span="8">
                        <!-- <FormItem label="标签">
                            <Select
                                v-model="tags_ids"
                                multiple
                                :max-tag-count="3"
                                @on-change="askData">
                                <OptionGroup
                                    :label="item.tag_name"
                                    v-for="item in tags_list"
                                    :key="item.value">
                                    <Option
                                        v-for="its in item.children"
                                        :value="`${item.wechatid}()${its.tag_id}`"
                                        :key="its.tag_id">{{ its.tag_name }}</Option>
                                </OptionGroup>
                            </Select>
                        </FormItem> -->
                        <FormItem label="标签">
                            <Select v-model="tags_ids" multiple placeholder="请选择部门标签" @on-change="askData">
                                <Option v-for="item in projectlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </row>
                <row> </row>
                <Divider />
                <DescriptionList title="筛选结果" :col="3">
                    <Description term="筛选用户数：">{{ total }}</Description>
                    <Description term="分配给：">
                        <Row
                            type="flex"
                            justify="start"
                            align="middle"
                            :gutter="16"
                        >
                            <Col>
                                <Checkbox
                                    v-model="allot_type2"
                                    :disabled="allot_type2bool"
                                    @on-change="checkchange(2)"
                                    >公海</Checkbox
                                >
                            </Col>
                            <Col>
                                <Checkbox
                                    v-model="allot_type1"
                                    :disabled="allot_type1bool"
                                    @on-change="checkchange(1)"
                                    >鱼池</Checkbox
                                >
                            </Col>
                            <Col>
                                <Select
                                    v-model="allot_member_ids"
                                    :disabled="allot_type0bool"
                                    multiple
                                    @on-change="checkchange(0)"
                                    v-width="160"
                                    :max-tag-count="3"
                                >
                                    <OptionGroup
                                        :label="item.label"
                                        v-for="item in member_list"
                                        :key="item.value"
                                    >
                                        <Option
                                            v-for="its in item.children"
                                            :value="its.value"
                                            :key="its.value"
                                            >{{ its.label }}</Option
                                        >
                                    </OptionGroup>
                                </Select>
                            </Col>
                        </Row>
                    </Description>
                    <Description
                        ><Button
                            v-hasC="{
                                name: 'patient-index-allot',
                                flag: 'v1/patient/index/allot',
                            }"
                            type="primary"
                            :disabled="
                                total <= 0 ||
                                (!allot_type1bool &&
                                    !allot_type2bool &&
                                    !allot_type0bool)
                            "
                            @click="sunmit"
                            class="ivu-mr-8"
                            :loading="remarksloading"
                            >确定分配</Button
                        >
                        <Button
                            v-hasC="{
                                name: 'patient-index-allot',
                                flag: 'v1/patient/index/allot',
                            }"
                            @click="reset"
                            >重置</Button
                        >
                    </Description>
                </DescriptionList>
            </Form>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </Card>
    </div>
</template>

<script>
    import {
        patientindexallotlist,
        patientindexallot
    } from '@/api/hqapi/indexone.js';
    import { customerwechattagslist } from '@/api/hqapi';
    import { patientindextagsconditionlistv2 } from '@/api/hqapi/tags';
    export default {
        name: 'index',
        data () {
            return {
                tags_ids: [],
                allot_type: '',
                allot_type2: '',
                allot_type1: '',
                allot_type1bool: false,
                allot_type2bool: false,
                allot_type0bool: false,
                spinShow: false,
                total: 0,
                text2: '',
                text6: '',
                remarksloading: false,
                params: {
                    department_id: '',
                    timeval: ['', ''],
                    belong_member_id: [],
                    channel_id: [],
                    patient_diseases_id: [],
                    tags_ids: [],
                    last_callback_id: '',
                    patient_status_id: '',
                    allot_type: 0,
                    last_belong_member_id: []
                },
                member_list: [],
                source_channel: [],
                tags_list: [],
                diseases: [],
                allot_ids: [],
                select_department_list: [],
                select_member_list: [],
                select_member_lists: [],
                status_list: [],
                allot_member_ids: [],
                spinShows: true,
                select_common_list: [],
                select_fish_member_list: [],
                select_sea_member_list: [],
                select_fish_member_lists: [],
                select_sea_member_lists: [],
                tagarrlist: [],
                projectlist: []
            };
        },
        mounted () {
            patientindextagsconditionlistv2().then(res => {
                this.projectlist = res.project_tags
            })
            this.initial();
        },
        methods: {
            askDatatag (e) {
                let member_id = e.join(',')
                customerwechattagslist({ member_id }).then(res => {
                    this.tags_list = res.list
                    this.tags_ids = []
                    this.askData();
                })
            },
            initial () {
                this.askData();
            },
            checkchange (num) {
                if (num === 2) {
                    if (this.allot_type2) {
                        this.params.allot_type = num
                        this.allot_type1bool = true;
                        this.allot_type2bool = false;
                        this.allot_type0bool = true;
                    } else {
                        this.params.allot_type = 0
                        this.allot_type1bool = false;
                        this.allot_type2bool = false;
                        this.allot_type0bool = false;
                    }
                } else if (num === 1) {
                    if (this.allot_type1) {
                        this.params.allot_type = num
                        this.allot_type1bool = false;
                        this.allot_type2bool = true;
                        this.allot_type0bool = true;
                    } else {
                        this.params.allot_type = 0
                        this.allot_type1bool = false;
                        this.allot_type2bool = false;
                        this.allot_type0bool = false;
                    }
                } else if (num === 0) {
                    if (this.allot_member_ids.length > 0) {
                        this.params.allot_type = num
                        this.allot_type1bool = true;
                        this.allot_type2bool = true;
                        this.allot_type0bool = false;
                    } else {
                        this.params.allot_type = 0
                        this.allot_type1bool = false;
                        this.allot_type2bool = false;
                        this.allot_type0bool = false;
                    }
                }
            },
            askData () {
                // let tags_ids = []
                // let wxids = []
                // let wxid = []
                // let datalists = []
                // for (let item of this.tags_ids) {
                //     wxids.push(item.split('()')[0])
                //     datalists.push({wechatid: item.split('()')[0], ids: item.split('()')[1]})
                // }
                // wxid = Array.from(new Set(wxids))
                // for (let item of wxid) {
                //     tags_ids.push({wechatid:item,ids: []})
                // }
                // for (let item of tags_ids) {
                //     for (let items of datalists) {
                //         if (item.wechatid == items.wechatid) {
                //             item.ids.push(items.ids)
                //         }
                //     }
                //     item.ids = item.ids.join(',')
                // }
                // if (this.spinShows) {
                this.spinShow = true;
                this.spinShows = false;
                // }
                // this.tagarrlist = tags_ids
                let config = {
                    created_stime: this.params.timeval[0],
                    created_etime: this.params.timeval[1],
                    belong_member_id: this.params.belong_member_id.join(','),
                    channel_id: this.params.channel_id.join(','),
                    patient_diseases_id: this.params.patient_diseases_id.join(','),
                    // tags_ids: tags_ids.length?JSON.stringify(tags_ids):'',
                    tags_ids: this.tags_ids.join(','),
                    last_callback_id: this.params.last_callback_id,
                    patient_status_id: this.params.patient_status_id,
                    department_id: this.params.department_id,
                    allot_type: this.params.allot_type,
                    last_belong_member_id: this.params.last_belong_member_id.join(',')
                };
                patientindexallotlist(config).then((res) => {
                    // if (this.member_list.length === 0) {
                    this.member_list = res.condition.member_list;
                    // }
                    if (this.source_channel.length === 0) {
                        this.source_channel = res.condition.source_channel;
                    }
                    // if (this.tags_list.length === 0) {
                    // this.tags_list = res.condition.tags_list;
                    // }
                    if (this.diseases.length === 0) {
                        this.diseases = res.condition.diseases;
                    }
                    // if (this.select_department_list.length === 0) {
                    this.select_department_list =
                        res.condition.select_department_list;
                    // }
                    // if (this.select_department_list.length === 1){
                    //     this.params.department_id = this.select_department_list[0].value
                    // }
                    // if (this.status_list.length === 0) {
                    this.status_list = res.condition.status_list;
                    // }
                    // if (this.select_member_list.length === 0) {
                    this.select_member_list = JSON.parse(
                        JSON.stringify(res.condition.select_member_list)
                    );
                    this.select_member_lists = JSON.parse(
                        JSON.stringify(res.condition.select_member_list)
                    );
                    this.select_common_list = JSON.parse(
                        JSON.stringify(res.condition.select_common_list)
                    );
                    this.select_fish_member_list = JSON.parse(
                        JSON.stringify(res.condition.select_fish_member_list)
                    );
                    this.select_sea_member_list = JSON.parse(
                        JSON.stringify(res.condition.select_sea_member_list)
                    );
                    this.select_fish_member_lists = JSON.parse(
                        JSON.stringify(res.condition.select_fish_member_list)
                    );
                    this.select_sea_member_lists = JSON.parse(
                        JSON.stringify(res.condition.select_sea_member_list)
                    );
                    if (!this.params.department_id) {
                        this.select_member_lists = JSON.parse(
                            JSON.stringify(this.select_member_list)
                        );
                        this.select_sea_member_lists = JSON.parse(
                            JSON.stringify(this.select_sea_member_list)
                        );
                        this.select_fish_member_lists = JSON.parse(
                            JSON.stringify(this.select_fish_member_list)
                        );
                    } else {
                        this.select_member_lists = [];
                        for (let item of this.select_member_list) {
                            if (+item.value === 0) {
                                this.select_member_lists.unshift(item);
                            } else if (item.department_id === this.params.department_id) {
                                this.select_member_lists.push(item);
                            }
                        }
                        this.select_sea_member_lists = [];
                        for (let item of this.select_sea_member_list) {
                            if (+item.value === 0) {
                                this.select_sea_member_lists.unshift(item);
                            } else if (item.department_id === this.params.department_id) {
                                this.select_sea_member_lists.push(item);
                            }
                        }
                        this.select_fish_member_lists = [];
                        for (let item of this.select_fish_member_list) {
                            if (+item.value === 0) {
                                this.select_fish_member_lists.unshift(item);
                            } else if (item.department_id === this.params.department_id) {
                                this.select_fish_member_lists.push(item);
                            }
                        }
                    }
                    this.allot_ids = res.list;
                    this.total = res.total;
                    this.spinShow = false;
                });
            },
            sunmit () {
                this.remarksloading = true;
                let text2 = [];
                for (let item of this.select_member_lists) {
                    for (let its of this.params.belong_member_id) {
                        if (item.value === its) {
                            text2.push(item.label);
                        }
                    }
                }
                this.text2 = text2.join('、');
                if (this.allot_type2bool && this.allot_type1bool) {
                    let text6 = [];
                    this.allot_type = 0;
                    for (let item of this.member_list) {
                        for (let its of item.children) {
                            for (let itit of this.allot_member_ids) {
                                if (its.value === itit) {
                                    text6.push(its.label);
                                }
                            }
                        }
                    }
                    this.text6 = text6.join('、');
                } else if (this.allot_type2bool && this.allot_type0bool) {
                    this.allot_type = 1;
                    this.text6 = '鱼池';
                } else if (this.allot_type1bool && this.allot_type0bool) {
                    this.allot_type = 2;
                    this.text6 = '公海';
                }
                this.params.allot_type = this.allot_type
                let config = {
                    created_stime: this.params.timeval[0],
                    created_etime: this.params.timeval[1],
                    belong_member_id: this.params.belong_member_id.join(','),
                    channel_id: this.params.channel_id.join(','),
                    patient_diseases_id: this.params.patient_diseases_id.join(','),
                    // tags_ids: this.tagarrlist.length?JSON.stringify(this.tagarrlist):'',
                    tags_ids: this.tags_ids.join(','),
                    last_callback_id: this.params.last_callback_id,
                    allot_member_ids: this.allot_member_ids.join(','),
                    patient_status_id: this.params.patient_status_id,
                    allot_type: this.allot_type,
                    last_belong_member_id: this.params.last_belong_member_id.join(','),
                    department_id: this.params.department_id
                };
                this.logs(this.tagarrlist)
                this.$Modal.confirm({
                    title: '分配确认',
                    content: `<p>是否确认将<strong>${this.text2}</strong>${
                        this.text2 ? '的' : ''
                    }<strong>${this.total}</strong>个患者分配给<strong>${
                        this.text6
                    }</strong></p>`,
                    onOk: () => {
                        patientindexallot(config)
                            .then(() => {
                                this.$Message.success('分配成功!');
                                this.params.department_id = '';
                                this.text2 = '',
                                this.text6 = '',
                                this.params = {
                                    timeval: ['', ''],
                                    belong_member_id: [],
                                    channel_id: [],
                                    patient_diseases_id: [],
                                    tags_ids: [],
                                    last_callback_id: '',
                                    patient_status_id: '',
                                    last_belong_member_id: []
                                };
                                this.tags_ids = []
                                this.allot_member_ids = [];
                                this.allot_type = '';
                                this.allot_type2 = false;
                                this.allot_type1 = false;
                                this.allot_type1bool = false;
                                this.allot_type2bool = false;
                                this.allot_type0bool = false;
                                this.askData();
                                this.remarksloading = false;
                            })
                            .catch(() => {
                                this.remarksloading = false;
                        });
                    },
                    onCancel: () => {
                        this.remarksloading = false;
                    }
                });
            },
            reset () {
                this.params.department_id = '';
                this.text2 = '';
                this.text6 = '';
                this.params = {
                    timeval: ['', ''],
                    belong_member_id: [],
                    channel_id: [],
                    patient_diseases_id: [],
                    tags_ids: [],
                    last_callback_id: '',
                    patient_status_id: ''
                };
                this.allot_member_ids = [];
                this.allot_type = '';
                this.allot_type2 = false;
                this.allot_type1 = false;
                this.allot_type1bool = false;
                this.allot_type2bool = false;
                this.allot_type0bool = false;
            },
            askDatasing () {
                this.params.belong_member_id = []
                this.askDatas()
            },
            askDatasings () {
                this.params.last_belong_member_id = []
                this.askDatas()
            },
            askDatas () {
                this.spinShows = true;
                // this.params.belong_member_id = [];
                this.select_member_lists = [];
                this.select_sea_member_lists = [];
                this.select_fish_member_lists = [];
                if (!this.params.department_id) {
                    this.select_member_lists = JSON.parse(
                        JSON.stringify(this.select_member_list)
                    );
                    this.select_sea_member_lists = JSON.parse(
                        JSON.stringify(this.select_sea_member_list)
                    );
                    this.select_fish_member_lists = JSON.parse(
                        JSON.stringify(this.select_fish_member_list)
                    );
                } else {
                    for (let item of this.select_member_list) {
                        if (+item.value === 0) {
                            this.select_member_lists.unshift(item);
                        } else if (item.department_id === this.params.department_id) {
                            this.select_member_lists.push(item);
                        }
                    }
                    for (let item of this.select_sea_member_list) {
                        if (+item.value === 0) {
                            this.select_sea_member_lists.unshift(item);
                        } else if (item.department_id === this.params.department_id) {
                            this.select_sea_member_lists.push(item);
                        }
                    }
                    for (let item of this.select_fish_member_list) {
                        if (+item.value === 0) {
                            this.select_fish_member_lists.unshift(item);
                        } else if (item.department_id === this.params.department_id) {
                            this.select_fish_member_lists.push(item);
                        }
                    }
                }
                this.askData();
            }
        }
    };
</script>

<style scoped>
.v-pd-40 {
    padding-bottom: 40px;
    padding-top: 2px;
}
</style>
